/*
  学习目标：props的基本使用
    props:  多个组件标签属性组成的对象
    函数式组件：通过形参接收props
    类组件: 通过this.props接收props对象
    👍推荐解构props对象
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child name="zs" age={18}></Child>
        <Hello name="123" age={20}></Hello>
      </div>
    );
  }
}

// 函数式组件： 通过形参接收props对象
// 👍 推荐解构props
function Child({ name, age }) {
  return (
    <h1>
      我是Child - {name} - {age}
    </h1>
  );
}

class Hello extends React.Component {
  render() {
    const { name, age } = this.props;

    return (
      <h2>
        我是Hello - {name} - {age}
      </h2>
    );
  }
}

//
//
//
//
